<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑角色</title>
    <link rel="stylesheet" th:href="@{/layui-v2.6.8/css/layui.css}" href="/static/layui-v2.6.8/css/layui.css">
</head>
<body>
<div style="padding: 15px;">
    <div>
        <a th:href="@{/role/getRoleList}">
            <i class="layui-icon layui-icon-return" style="font-size: 30px; color: #1E9FFF;"></i>
        </a>
    </div>
    <form class="layui-form form-position" action="/amin/role/editRole" method="post">
        <input type="text" id="roleId" name="id" th:field="${role.id}" style="display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="roleName" th:field="${role.roleName}" required  lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input layui-input-width">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色序号</label>
            <div class="layui-input-block">
                <input type="text" name="sort" th:field="${role.sort}" required  lay-verify="required" placeholder="请输入角色序号" autocomplete="off" class="layui-input layui-input-width">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remarks" th:field="${role.remarks}" required  lay-verify="required" placeholder="请输入备注" autocomplete="off" class="layui-input layui-input-width">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
            </div>
        </div>
    </form>
    <div class="layui-progress">
        <div class="layui-progress-bar layui-bg-red" lay-percent="100%"></div>
    </div>
    <div id="layerDemo" style="margin-bottom: 0;margin-top: 10px;">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单配置</label>
            <div class="layui-input-block">
                <button data-method="setTop" class="layui-btn">点击配置菜单</button>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入 layui.js -->
<script th:src="@{/layui-v2.6.8/layui.js}" src="/static/layui-v2.6.8/layui.js"></script>
<script th:src="@{/jquery-3.5.1/jquery-3.5.1.min.js}" src="/static/jquery-3.5.1/jquery-3.5.1.min.js"></script>

<script>
    layui.use(function(){
        var layer = layui.layer
            ,form = layui.form;
        var href = '/amin/role/roleMenu?id='+$("#roleId").val();
        //触发事件
        var active = {
            setTop: function(){
                var that = this;
                //多窗口模式，层叠置顶
                layer.open({
                    type: 2 //此处以iframe举例
                    ,title: '菜单配置'
                    ,area: ['100%', '100%']
                    ,shade: 0
                    ,maxmin: true
                    ,offset: [ //为了演示，随机坐标
                       /* ($(window).height())
                        ,($(window).width())*/
                        0,0
                    ]
                    ,content: href

                   /* ,btn: ['继续弹出', '全部关闭'] //只是为了演示
                    ,yes: function(){
                        $(that).click();
                    }
                    ,btn2: function(){
                        layer.closeAll();
                    }*/

                    ,zIndex: layer.zIndex //重点1
                    ,success: function(layero, index){
                        layer.setTop(layero); //重点2. 保持选中窗口置顶

                        //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
                        layer.escIndex = layer.escIndex || [];
                        layer.escIndex.unshift(index);
                        //选中当前层时，将当前层索引放置在首位
                        layero.on('mousedown', function(){
                            var _index = layer.escIndex.indexOf(index);
                            if(_index !== -1){
                                layer.escIndex.splice(_index, 1); //删除原有索引
                            }
                            layer.escIndex.unshift(index); //将索引插入到数组首位
                        });
                    }
                    ,end: function(){
                        //更新索引
                        if(typeof layer.escIndex === 'object'){
                            layer.escIndex.splice(0, 1);
                        }
                    }


                });
            }
        };

        $('#layerDemo .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });


        //多窗口模式 - esc 键
        $(document).on('keyup', function(e){
            if(e.keyCode === 27){
                layer.close(layer.escIndex ? layer.escIndex[0] : 0);
            }
        });
        //监听提交
        form.on('submit(formDemo)', function(data){
            //layer.msg(JSON.stringify(data.field));
            return true;
        });
    });
    function setMenu(roleId) {
        console.log("设置菜单"+roleId)
    }
</script>
</html>